<template>
  <div class="container page">
    <div class="header">
      <van-nav-bar
          title="客服"
          left-arrow
          @click-left="$router.back()"
      />
    </div>
  </div>
</template>
<script>
export default {
  name: "ServiceOnline",
  data: function () {
    return {}
  }
};
</script>
<style scoped>
::v-deep .van-nav-bar__left > i, ::v-deep .van-nav-bar__text, ::v-deep .van-nav-bar__title, ::v-deep .van-cell__title {
  color: var(--van-nav-bar-icon-color);
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%
}

.nav {
  background: linear-gradient(270deg, #fff, #fff)
}

.servicelistItem {
  display: flex;
  flex-direction: column;
  width: calc(100% - .64rem);
  height: 3.2rem;
  padding: .32rem .26667rem;
  margin: .4rem .32rem;
  border-radius: .16rem;
  justify-content: space-between;
  background: #fff
}

.servicelistItem .servicelistItemTop {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 1.33333rem
}

.servicelistItem .servicelistItemTop .servicelistItemImage {
  width: 1.33333rem;
  height: 1.33333rem;
  border-radius: .66667rem
}

.servicelistItem .servicelistItemTop .servicelistItemText {
  margin-left: .53333rem;
  font-size: .48rem;
  font-weight: 700;
  color: #000;
  flex: 1
}

.servicelistItem .servicelistItemTop .servicelistItemBtn {
  display: flex;
  width: 1.97333rem;
  height: .64rem;
  border-radius: .8rem;
  align-items: center;
  justify-content: center;
  background: linear-gradient(270deg, #fff, #fff)
}

.servicelistItem .servicelistItemTop .servicelistItemBtn .servicelistItemBtnText {
  color: #fff
}

.servicelistItem .servicelistItemBottom {
  height: .66667rem;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 25px;
  background: #f4ebf3;
  border-radius: .10667rem;
  color: #979799
}

.servicelistItem .servicelistItemBottom .servicelistItemInfoText {
  font-size: .37333rem
}

</style>
